<template>
  <div class="box">
    <div class="header">
      <div class="iconCir" :style="{ background: todoObj.color }">
        <i :class="todoObj.icon"></i>
      </div>
      <van-field v-model="todoObj.text" label="" />
    </div>

    <div class="iconBox">
      <div
        class="iconItem"
        @click="getIcon(item.fontClass)"
        v-for="(item, index) in iconList"
        :key="index"
      >
        <i :class="getIconClass(item.fontClass)"></i>
      </div>
    </div>

    <div class="colorBox">
      <div
        class="colorItem"
        :style="{ background: item }"
        @click="getColor(item)"
        v-for="(item, index) in colorList"
        :key="index"
      ></div>
    </div>

    <van-button square type="primary" block size="small" @click="addTodo"
      >添加待办
    </van-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { Toast } from "vant";

export default defineComponent({
  name: "newTodo",
  setup(props, context) {
    const store = useStore();
    const state = reactive({
      iconList: store.state.iconList,
      colorList: store.state.colorList,
      todoObj: {
        text: "新建任务",
        color: "#DDDDDD",
        icon: "iconfont icon-Txu",
        isComplete: false
      }
    });

    function getIconClass(val: string) {
      return `iconfont icon-${val}`;
    }

    function getIcon(val: string) {
      state.todoObj.icon = getIconClass(val);
    }

    function getColor(val: string) {
      state.todoObj.color = val;
    }

    function addTodo() {
      Toast.success("创建任务成功！");
      // 拷贝数据 添加数据
      const copyTodoList = [...store.state.todoList];
      copyTodoList.push(state.todoObj);

      store.commit("setTodo", copyTodoList);
      context.emit("set-page-type", "myTodo");
    }

    return {
      ...toRefs(state),
      getIconClass,
      getIcon,
      getColor,
      addTodo
    };
  }
});
</script>

<style lang="scss" scoped>
.box {
  background: white;
}

.header {
  padding-top: 18px;

  .iconCir {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid red;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;

    i {
      font-size: 48px;
    }
  }
}

.iconBox {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  height: 180px;
  overflow: scroll;

  .iconItem {
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    display: flex;
    margin: 5px;
    justify-content: center;
    align-items: center;

    i {
      font-size: 34px;
    }
  }
}

.colorBox {
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  height: 180px;
  overflow: scroll;
  margin-bottom: 83px;

  .colorItem {
    box-sizing: border-box;
    width: 49px;
    height: 49px;
    margin: 5px;
    border-radius: 50%;
  }
}
</style>
